<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>流程图生成器 - 在线工具</title>
    <script src="css/tailwindcss.js"></script>
    <link href="css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/style.css">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@10.6.1/dist/mermaid.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
</head>
<body class="bg-gradient-to-br from-light to-gray-100 font-inter min-h-screen flex flex-col" style="background: linear-gradient(135deg, #F8FAFC 0%, #F3F4F6 100%);">
    <!-- 导航栏 -->
    <div id="navbar-container"></div>

    <!-- 主要内容 -->
    <main class="flex-grow container mx-auto px-4 py-8">
        <!-- 页面标题 -->
        <div class="text-center mb-8" style="animation: fadeInUp 0.6s ease-out both;">
            <h1 class="text-4xl font-bold text-gray-800 mb-4">
                <i class="fa fa-sitemap text-blue-500 mr-3"></i>
                <span class="text-primary">流程图</span>生成器
            </h1>
            <p class="text-lg text-gray-600 max-w-2xl mx-auto">
                通过简单的文本描述生成标准的流程图，快速创建系统流程和业务逻辑图
            </p>
        </div>

        <!-- 工具区域 -->
        <div class="grid grid-cols-1 lg:grid-cols-5 gap-6">
            <!-- 左侧：输入和预览区域 -->
            <div class="lg:col-span-3 space-y-6" style="animation: fadeInUp 0.8s ease-out both; animation-delay: 0.2s;">
                <!-- 文本输入区域 -->
                <div class="bg-white rounded-xl shadow-xl border border-gray-100 p-6 card-hover" style="animation: fadeInUp 0.6s ease-out both; animation-delay: 0.3s;">
                    <h3 class="text-lg font-bold text-gray-800 mb-4">
                        <i class="fa fa-edit text-blue-500 mr-2"></i>
                        流程描述
                    </h3>
                    
                    <!-- 输入方式选择 -->
                    <div class="mb-4">
                        <div class="flex space-x-3 mb-4">
                            <button id="textInputBtn" class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors text-sm btn-hover">
                                <i class="fa fa-keyboard-o mr-2"></i>文本输入
                            </button>
                            <button id="templateBtn" class="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition-colors text-sm btn-hover">
                                <i class="fa fa-file-text-o mr-2"></i>模板选择
                            </button>
                        </div>
                    </div>

                    <!-- 文本输入区域 -->
                    <div id="textInputArea">
                        <textarea id="flowDescription" 
                                class="w-full h-40 p-4 border border-gray-300 rounded-lg resize-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                                placeholder="请输入流程描述，例如：&#10;开始 -> 用户登录 -> 验证身份 -> 显示主页 -> 结束&#10;&#10;或者使用更详细的描述：&#10;1. 用户访问登录页面&#10;2. 输入用户名和密码&#10;3. 系统验证用户信息&#10;4. 验证成功则跳转到主页&#10;5. 验证失败则显示错误信息&#10;6. 用户可以选择重新登录或注册新账号"></textarea>
                    </div>

                    <!-- 模板选择区域 -->
                    <div id="templateArea" class="hidden">
                        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3">
                            <div class="template-card p-3 border border-blue-200 rounded-lg cursor-pointer hover:border-blue-500 hover:bg-blue-50 transition-all" data-template="login">
                                <h4 class="font-semibold text-blue-800 mb-1 text-sm"><i class="fa fa-sign-in-alt mr-1"></i>用户登录流程</h4>
                                <p class="text-xs text-gray-600">包含登录验证、错误处理等</p>
                            </div>
                            <div class="template-card p-3 border border-green-200 rounded-lg cursor-pointer hover:border-green-500 hover:bg-green-50 transition-all" data-template="order">
                                <h4 class="font-semibold text-green-800 mb-1 text-sm"><i class="fa fa-shopping-cart mr-1"></i>订单处理流程</h4>
                                <p class="text-xs text-gray-600">包含下单、支付、发货等</p>
                            </div>
                            <div class="template-card p-3 border border-purple-200 rounded-lg cursor-pointer hover:border-purple-500 hover:bg-purple-50 transition-all" data-template="approval">
                                <h4 class="font-semibold text-purple-800 mb-1 text-sm"><i class="fa fa-check-circle mr-1"></i>审批流程</h4>
                                <p class="text-xs text-gray-600">包含提交、审核、批准等</p>
                            </div>
                            <div class="template-card p-3 border border-orange-200 rounded-lg cursor-pointer hover:border-orange-500 hover:bg-orange-50 transition-all" data-template="data">
                                <h4 class="font-semibold text-orange-800 mb-1 text-sm"><i class="fa fa-database mr-1"></i>数据处理流程</h4>
                                <p class="text-xs text-gray-600">包含输入、处理、输出等</p>
                            </div>
                            <div class="template-card p-3 border border-indigo-200 rounded-lg cursor-pointer hover:border-indigo-500 hover:bg-indigo-50 transition-all" data-template="registration">
                                <h4 class="font-semibold text-indigo-800 mb-1 text-sm"><i class="fa fa-user-plus mr-1"></i>用户注册流程</h4>
                                <p class="text-xs text-gray-600">包含信息填写、验证等</p>
                            </div>
                            <div class="template-card p-3 border border-red-200 rounded-lg cursor-pointer hover:border-red-500 hover:bg-red-50 transition-all" data-template="password_reset">
                                <h4 class="font-semibold text-red-800 mb-1 text-sm"><i class="fa fa-key mr-1"></i>密码重置流程</h4>
                                <p class="text-xs text-gray-600">包含邮箱验证、密码更新等</p>
                            </div>
                            <div class="template-card p-3 border border-teal-200 rounded-lg cursor-pointer hover:border-teal-500 hover:bg-teal-50 transition-all" data-template="file_upload">
                                <h4 class="font-semibold text-teal-800 mb-1 text-sm"><i class="fa fa-upload mr-1"></i>文件上传流程</h4>
                                <p class="text-xs text-gray-600">包含文件检查、上传等</p>
                            </div>
                            <div class="template-card p-3 border border-pink-200 rounded-lg cursor-pointer hover:border-pink-500 hover:bg-pink-50 transition-all" data-template="search">
                                <h4 class="font-semibold text-pink-800 mb-1 text-sm"><i class="fa fa-search mr-1"></i>搜索功能流程</h4>
                                <p class="text-xs text-gray-600">包含关键词处理、结果排序等</p>
                            </div>
                            <div class="template-card p-3 border border-yellow-200 rounded-lg cursor-pointer hover:border-yellow-500 hover:bg-yellow-50 transition-all" data-template="payment">
                                <h4 class="font-semibold text-yellow-800 mb-1 text-sm"><i class="fa fa-credit-card mr-1"></i>支付处理流程</h4>
                                <p class="text-xs text-gray-600">包含多种支付方式处理</p>
                            </div>
                            <div class="template-card p-3 border border-cyan-200 rounded-lg cursor-pointer hover:border-cyan-500 hover:bg-cyan-50 transition-all" data-template="notification">
                                <h4 class="font-semibold text-cyan-800 mb-1 text-sm"><i class="fa fa-bell mr-1"></i>消息通知流程</h4>
                                <p class="text-xs text-gray-600">包含邮件、短信、推送等</p>
                            </div>
                            <div class="template-card p-3 border border-gray-200 rounded-lg cursor-pointer hover:border-gray-500 hover:bg-gray-50 transition-all" data-template="backup">
                                <h4 class="font-semibold text-gray-800 mb-1 text-sm"><i class="fa fa-save mr-1"></i>数据备份流程</h4>
                                <p class="text-xs text-gray-600">包含备份、验证、存储等</p>
                            </div>
                            <div class="template-card p-3 border border-emerald-200 rounded-lg cursor-pointer hover:border-emerald-500 hover:bg-emerald-50 transition-all" data-template="deployment">
                                <h4 class="font-semibold text-emerald-800 mb-1 text-sm"><i class="fa fa-rocket mr-1"></i>应用部署流程</h4>
                                <p class="text-xs text-gray-600">包含环境检查、部署、回滚等</p>
                            </div>
                            <div class="template-card p-3 border border-amber-200 rounded-lg cursor-pointer hover:border-amber-500 hover:bg-amber-50 transition-all" data-template="monitoring">
                                <h4 class="font-semibold text-amber-800 mb-1 text-sm"><i class="fa fa-chart-line mr-1"></i>系统监控流程</h4>
                                <p class="text-xs text-gray-600">包含指标收集、告警等</p>
                            </div>
                            <div class="template-card p-3 border border-lime-200 rounded-lg cursor-pointer hover:border-lime-500 hover:bg-lime-50 transition-all" data-template="cache">
                                <h4 class="font-semibold text-lime-800 mb-1 text-sm"><i class="fa fa-memory mr-1"></i>缓存管理流程</h4>
                                <p class="text-xs text-gray-600">包含缓存检查、更新等</p>
                            </div>
                            <div class="template-card p-3 border border-rose-200 rounded-lg cursor-pointer hover:border-rose-500 hover:bg-rose-50 transition-all" data-template="security">
                                <h4 class="font-semibold text-rose-800 mb-1 text-sm"><i class="fa fa-shield-alt mr-1"></i>安全防护流程</h4>
                                <p class="text-xs text-gray-600">包含身份验证、权限检查等</p>
                            </div>
                            <div class="template-card p-3 border border-violet-200 rounded-lg cursor-pointer hover:border-violet-500 hover:bg-violet-50 transition-all" data-template="api">
                                <h4 class="font-semibold text-violet-800 mb-1 text-sm"><i class="fa fa-code mr-1"></i>API调用流程</h4>
                                <p class="text-xs text-gray-600">包含请求验证、限流等</p>
                            </div>
                            <div class="template-card p-3 border border-sky-200 rounded-lg cursor-pointer hover:border-sky-500 hover:bg-sky-50 transition-all" data-template="workflow">
                                <h4 class="font-semibold text-sky-800 mb-1 text-sm"><i class="fa fa-cogs mr-1"></i>工作流引擎流程</h4>
                                <p class="text-xs text-gray-600">包含任务执行、条件判断等</p>
                            </div>
                        </div>
                    </div>

                    <!-- 操作按钮 -->
                    <div class="flex flex-wrap gap-3 mt-4">
                        <button id="generateFlowchart" class="px-6 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600 transition-colors btn-hover">
                            <i class="fa fa-magic mr-2"></i>生成流程图
                        </button>
                        <button id="clearInput" class="px-6 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition-colors btn-hover">
                            <i class="fa fa-trash mr-2"></i>清空
                        </button>
                    </div>
                </div>

                <!-- 流程图预览区域 -->
                <div class="bg-white rounded-xl shadow-xl border border-gray-100 p-6 card-hover" style="animation: fadeInUp 0.6s ease-out both; animation-delay: 0.4s;">
                    <h3 class="text-lg font-bold text-gray-800 mb-4">
                        <i class="fa fa-eye text-green-500 mr-2"></i>
                        流程图预览
                    </h3>
                    <div id="flowchartPreview" class="border border-gray-200 rounded-lg p-4 min-h-80 bg-gray-50">
                        <div id="mermaidContainer" class="mermaid" style="display: none;"></div>
                        <div id="placeholder" class="text-center text-gray-500 flex items-center justify-center h-full">
                            <div>
                                <i class="fa fa-sitemap text-4xl mb-4"></i>
                                <p>请输入流程描述并点击"生成流程图"</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 右侧：样式控制区域 -->
            <div class="lg:col-span-2 space-y-6" style="animation: fadeInUp 0.8s ease-out both; animation-delay: 0.4s;">
                <!-- 流程图样式 -->
                <div class="bg-white rounded-xl shadow-xl border border-gray-100 p-4 card-hover" style="animation: fadeInUp 0.6s ease-out both; animation-delay: 0.5s;">
                    <h3 class="text-lg font-bold text-gray-800 mb-3">
                        <i class="fa fa-paint-brush text-purple-500 mr-2"></i>
                        流程图样式
                    </h3>
                    <div class="space-y-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">流程图方向</label>
                            <select id="flowDirection" class="w-full p-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
                                <option value="TD">从上到下</option>
                                <option value="LR">从左到右</option>
                                <option value="RL">从右到左</option>
                                <option value="BT">从下到上</option>
                            </select>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">主题样式</label>
                            <select id="flowTheme" class="w-full p-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
                                <option value="default">默认</option>
                                <option value="forest">森林</option>
                                <option value="dark">暗色</option>
                                <option value="neutral">中性</option>
                                <option value="base">基础</option>
                            </select>
                        </div>
                    </div>
                </div>

                <!-- 导出选项 -->
                <div class="bg-white rounded-xl shadow-xl border border-gray-100 p-4 card-hover" style="animation: fadeInUp 0.6s ease-out both; animation-delay: 0.6s;">
                    <h3 class="text-lg font-bold text-gray-800 mb-3">
                        <i class="fa fa-cog text-orange-500 mr-2"></i>
                        导出选项
                    </h3>
                    <div class="space-y-3">
                        <button id="downloadSvgBtn" class="w-full px-4 py-2 bg-indigo-500 text-white rounded-lg hover:bg-indigo-600 transition-colors btn-hover">
                            <i class="fa fa-file-image-o mr-2"></i>下载SVG
                        </button>
                        <button id="downloadPngBtn" class="w-full px-4 py-2 bg-orange-500 text-white rounded-lg hover:bg-orange-600 transition-colors btn-hover">
                            <i class="fa fa-image mr-2"></i>下载PNG
                        </button>
                        <button id="copyCodeBtn" class="w-full px-4 py-2 bg-purple-500 text-white rounded-lg hover:bg-purple-600 transition-colors btn-hover">
                            <i class="fa fa-code mr-2"></i>复制代码
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <!-- 页脚 -->
    <div id="footer-container"></div>

    <script src="js/navbar.js"></script>
    <script src="js/footer.js"></script>
    <script src="js/flowchart-generator.js"></script>

    <style>
        /* 导航栏样式修复 */
        .text-primary {
            color: #165DFF !important;
        }
        
        .text-dark {
            color: #1E293B !important;
        }
        
        .bg-primary\/10 {
            background-color: rgba(22, 93, 255, 0.1) !important;
        }
        
        .hover\:bg-primary\/20:hover {
            background-color: rgba(22, 93, 255, 0.2) !important;
        }
        
        .hover\:text-primary:hover {
            color: #165DFF !important;
        }
        
        .transition-all-300 {
            transition: all 300ms ease-in-out !important;
        }
        
        /* Logo链接样式 */
        .navbar-logo {
            transition: all 0.3s ease;
            cursor: pointer;
        }
        
        .navbar-logo:hover {
            opacity: 0.8;
            transform: scale(1.02);
        }
        
        .navbar-logo:hover .fa-graduation-cap {
            transform: rotate(5deg);
        }
        
        /* 页面加载动画 */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        /* 卡片悬停动画 */
        .card-hover {
            transition: all 0.3s ease;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        }
        
        .card-hover:hover {
            transform: translateY(-4px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
            border-color: rgba(59, 130, 246, 0.2);
        }
        
        /* 按钮悬停动画 */
        .btn-hover {
            transition: all 0.2s ease;
        }
        
        .btn-hover:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }
        
        /* 模板卡片样式 */
        .template-card {
            transition: all 0.3s ease;
        }
        
        .template-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }
        
        /* 流程图容器样式 */
        #flowchartPreview .mermaid {
            background: white;
            border-radius: 8px;
            padding: 20px;
            display: flex !important;
            justify-content: center !important;
            align-items: center !important;
            min-height: 400px;
            width: 100%;
        }
        
        /* Mermaid SVG 居中 */
        #flowchartPreview .mermaid svg {
            display: block !important;
            margin: 0 auto !important;
            max-width: 100%;
            height: auto;
        }
        
        /* 确保流程图内容居中 */
        #flowchartPreview {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            min-height: 400px;
            position: relative;
        }
        
        /* 强制设置流程图文字和线条为黑色 */
        #flowchartPreview .mermaid svg text {
            fill: #000000 !important;
            color: #000000 !important;
        }
        
        #flowchartPreview .mermaid svg path {
            stroke: #000000 !important;
        }
        
        #flowchartPreview .mermaid svg line {
            stroke: #000000 !important;
        }
        
        #flowchartPreview .mermaid svg polygon {
            stroke: #000000 !important;
        }
        
        #flowchartPreview .mermaid svg rect {
            stroke: #000000 !important;
        }
        
        /* 占位符完全居中 */
        #placeholder {
            display: flex !important;
            justify-content: center;
            align-items: center;
            min-height: 400px;
            text-align: center;
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 10;
        }
        
        /* 当占位符隐藏时 */
        #placeholder[style*="display: none"] {
            display: none !important;
        }
        
        #placeholder > div {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
        
        /* 页面背景渐变 */
        body {
            background: linear-gradient(135deg, #F8FAFC 0%, #F3F4F6 100%) !important;
            min-height: 100vh;
        }
        
        /* 响应式调整 */
        @media (max-width: 768px) {
            .grid-cols-1.lg\\:grid-cols-2 {
                grid-template-columns: 1fr;
            }
        }
    </style>
</body>
</html>
